import IconArrowLeft from "@/assets/svg/icon-arrow-left"
import IconArrowRight from "@/assets/svg/icon-arrow-right"
import classNames from "classnames"
import PropTypes from "prop-types"
import React, { memo, useEffect, useState } from "react"
import { SwitchTransition, CSSTransition } from "react-transition-group"
import Indicator from "../indicator"
import { BrowserWrapper } from "./style"

const PictureBrowser = memo((props) => {
  const { closeBtn, detailInfo } = props
  const [newIndex, setNewIndex] = useState(0)
  const [isRight, setIsRight] = useState(false)
  const [showList, setShowList] = useState(true)
  function closeBtnHandle() {
    closeBtn && closeBtn(false)
  }
  useEffect(() => {
    // 由于 跳转到图片浏览器 会有滚动条，所以要隐藏滚动条，当关闭当前组件后要开启滚动条
    document.querySelector("body").style.overflow = "hidden"
    return () => {
      document.querySelector("body").style.overflow = "auto"
    }
  }, [])

  function btnControl(isRight) {
    let index = isRight ? newIndex + 1 : newIndex - 1
    const length = detailInfo.picture_urls.length
    if (index < 0) index = length - 1
    if (index > length - 1) index = 0
    setNewIndex(index)
    setIsRight(isRight)
  }
  function itenClickHandle(index) {
    index > newIndex ? setIsRight(true) : setIsRight(false)
    setNewIndex(index)
  }
  return (
    <BrowserWrapper
      isRight={isRight}
      showList1={showList ? "100" : "0"}
      showList2={showList ? "140" : "0"}
    >
      <div className="all">
        <div className="top">
          <span onClick={closeBtnHandle}>×</span>
        </div>
        <div className="content">
          <div className="control">
            <div className="btn" onClick={(e) => btnControl(false)}>
              <IconArrowLeft width={70} height={70} />
            </div>
            <div className="btn" onClick={(e) => btnControl(true)}>
              <IconArrowRight width={70} height={70} />
            </div>
          </div>
          <div className="picture">
            <SwitchTransition>
              <CSSTransition
                key={detailInfo.picture_urls[newIndex]}
                className="pic"
                timeout={200}
              >
                <img src={detailInfo.picture_urls[newIndex]} alt="请求失败" />
              </CSSTransition>
            </SwitchTransition>
          </div>
        </div>
        <div className="indicator">
          <div className="ind">
            <div className="info">
              <div className="count">
                <span className="num">
                  {newIndex + 1} / {detailInfo?.picture_urls?.length}
                </span>
                <span className="desc">
                  {" "}
                  room Apartment 图片 {newIndex + 1}
                </span>
              </div>
              <div className="show" onClick={(e) => setShowList(!showList)}>
                <span className="toggle">
                  {showList ? "隐藏" : "显示"}照片列表 {showList ? "﹀" : "︿"}
                </span>
              </div>
            </div>

            <div className="indicator-pics">
              <Indicator selectIndex={newIndex}>
                {detailInfo?.picture_urls?.map((item, index) => {
                  return (
                    <div
                      className={classNames("pics", {
                        active: index === newIndex,
                      })}
                      key={item}
                      onClick={(e) => itenClickHandle(index)}
                    >
                      <img src={item} alt="请求失败" />
                    </div>
                  )
                })}
              </Indicator>
            </div>
          </div>
        </div>
      </div>
    </BrowserWrapper>
  )
})

PictureBrowser.propTypes = {}

export default PictureBrowser
